<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:29:08
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-04-25 15:45:57
 * @FilePath: \web-pc\src\pages\big-screen\components\echart\index.vue
-->
<template>
  <div :class="className" :id="id" :style="{width,height}"></div>
</template>

<script>

export default {
  name: 'echart',
  props: {
    className:{
      type:String,
      default:()=>'chart'
    },
    id:{
      type:String,
      default:()=>'chart'
    },
    width:{
      type:String,
      default:()=>'100%'
    },
    height:{
      type:String,
      default:()=>'100%'
    },
    options:{
      type:Object,
      default:(()=>{})
    },
  },
  data () {
    return {
     chart:null
    }
  },
  watch: {
    options:{
      handler(options){
        this.chart.setOption(options,true)
      },
      deep:true
    }
  },
  mounted () {
   this.initChart()
  },
  beforeDestroy () {
    if (this.chart) {
      this.chart.dispose()
      this.chart=null
    }
  },
  methods: {
   initChart(){
    this.chart = echarts.init(this.$el,'tdTheme')
    this.chart.setOption(this.options,true)
   }
  }
}
</script>

<style>
</style>
